<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、mixin是什么</h2>
  <div>Mixin类通常作为功能模块使用，在需要该功能时“混入”，有利于代码复用又避免了多继承的复杂</div>
  <h4>Vue中的mixin</h4>
  <div>mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。</div>
  <br>
  <div>本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等</div>
  <br>
  <div>在Vue中我们可以局部混入跟全局混入</div>
  <h4>局部混入</h4>
  <div>定义一个mixin对象，有组件options的data、methods属性</div>
  <script>
    // var myMixin = {
    //   created: function () {
    //     this.hello()
    //   },
    //   methods: {
    //     hello: function () {
    //       console.log('hello from mixin!')
    //     }
    //   }
    // }

    // 组件通过mixins属性调用mixin对象
    // Vue.component('componentA',{
    //   mixins: [myMixin]
    // })

    // 通过Vue.mixin()进行全局的混入
    Vue.mixin({
      created: function () {
          console.log("全局混入")
        }
    })
  </script>
  <h4>全局混入</h4>
  <div>使用全局混入需要特别注意，因为它会影响到每一个组件实例（包括第三方组件）</div>
  <h4>注意事项：</h4>
  <div>当组件存在与mixin对象相同的选项的时候，进行递归合并的时候组件的选项会覆盖mixin的选项,但是如果相同选项为生命周期钩子的时候，会合并成一个数组，先执行mixin的钩子，再执行组件的钩子</div>
  <h2>二、使用场景</h2>
  <div>在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独</div>
  <br>
  <div>这时，可以通过Vue的mixin功能将相同或者相似的代码提出来</div>
  <h4>三、源码分析</h4>
  <div>关于Vue的几种类型的合并策略</div>
  <ul>
    <li>替换型:替换型合并有props、methods、inject、computed</li>
    <li>合并型:和并型合并有：data</li>
    <li>队列型:队列型合并有：全部生命周期和watch</li>
    <li>叠加型:叠加型合并有：component、directives、filters</li>
  </ul>
  <h4>小结：</h4>
  <ul>
    <li>替换型策略有props、methods、inject、computed，就是将新的同名参数替代旧的参数</li>
    <li>合并型策略是data, 通过set方法进行合并和重新赋值</li>
    <li>队列型策略有生命周期函数和watch，原理是将函数存入一个数组，然后正序遍历依次执行</li>
    <li>叠加型有component、directives、filters，通过原型链进行层层的叠加</li>
  </ul>
</body>
</html>